<template>
  <div class="template-content">
  <div class="layout">
    <layout :style="{minHeight: '100vh'}">
<!--      <Sider collapsible :collapsed-width="0" v-model="isCollapsed" class="ivu-card ivu-card-bordered" :style="{background: '#e0e0e0',width: '400px'}">-->
      <Sider collapsible :collapsed-width="0" v-model="isCollapsed" :style="{background: '#e0e0e0',width: '400px'}" class="ivu-card ivu-card-bordered">
<!--        <Input search v-model="srhValue" @on-search="search" placeholder="搜索关键词..." />
        <Tree :data="deviceData" :render="renderContent" @on-select-change="selectNode"></Tree>-->
        <Devicetree ref="deviceTree" @on-playbtnclick="playBtnClick" @on-select-change="selectChange"/>
      </sider>
      <Layout :style="{padding: '0 10px 10px'}">
        <Content :style="{padding: '10px', minHeight: '680px', background: '#fff'}">
          <div class="box">
            <ul class="box-inner flex">
              <li>
                <div ref="playContainer1" id="playContainer1" style="width:100%; height: 100%;">
                  <div class="buttons-box" id="buttonsBox1">
                      <i class="iconfont icon-stop jessibuca-btn" d="ll1" title="关闭" @click="destroy1">关闭</i>
                  </div>
                </div>
               </li>
              <li>
                <div ref="playContainer2" id="playContainer2" style="width:100%; height: 100%;">
                  <div class="buttons-box" id="buttonsBox2">
                    <i class="iconfont icon-stop jessibuca-btn" id="ll2" title="关闭" @click="destroy2">关闭</i>
                  </div>
                </div>
              </li>
              <li>
                <div ref="playContainer3" id="playContainer3" style="width:100%; height: 100%;">
                  <div class="buttons-box" id="buttonsBox3">
                    <i class="iconfont icon-stop jessibuca-btn" id="ll3" title="关闭" @click="destroy3">关闭</i>
                  </div>
                </div>
              </li>
              <li>
                <div ref="playContainer4" id="playContainer4" style="width:100%; height: 100%;">
                  <div class="buttons-box" id="buttonsBox4">
                    <i class="iconfont icon-stop jessibuca-btn" id="ll4" title="关闭" @click="destroy4">关闭</i>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </Content>
      </Layout>
    </layout>
  </div>
  </div>
</template>
<script>
import {playStart} from "@/api/Apiproxy";
import Devicetree from "_c/topnav/DeviceTree";
import {apiResult} from "@/libs/util";
export default {
  name:"MultiScreenPlay",
  components: {Devicetree},
  data(){
    return{
      isCollapsed:false,
      showVideoDialog:false,
      //videoUrl:null,
      hasAudio:true,
      jssibucaPlay1:null,
      jssibucaPlay2:null,
      jssibucaPlay3:null,
      jssibucaPlay4:null,
      jssibucaPlays:[null,null,null,null],
      buttonProps: {
        type: 'primary',
        size: 'small',
      }
    }
  },
  methods:{
    /** 点击节点 */
    selectChange(){},
    /**
     * 点击播放
     */
    playBtnClick(node,data){
      let serverId=data.arrt.gbServerId;
      let deviceId=data.arrt.code;
      let channelId=data.arrt.channel;
      console.log("通知设备推流：" +serverId+ " : " + deviceId + " : " + channelId);
      if (!(!!serverId && !!deviceId && !!channelId)){
        this.$Message.error("数据属性缺失，不能播放");
      }
      /** 通知设备推流 */
      playStart(serverId,deviceId,channelId).then(res=>{
          apiResult(res.data,false,result=>{
            this.play(res.data.data.ws_flv);
          })
      })
    },
    preparePlay(data){
      let serverId=data.arrt.gbServerId;
      let deviceId=data.arrt.code;
      let channelId=data.arrt.channel;
      console.log("通知设备推流：" +serverId+ " : " + deviceId + " : " + channelId);
      if (!(!!serverId && !!deviceId && !!channelId)){
        this.$Message.error("数据属性缺失，不能播放");
      }
      /** 通知设备推流 */
      playStart(serverId,deviceId,channelId).then(res=>{
          apiResult(res.data,false,result=>{
            this.play(result.data.ws_flv);
          })
      })
    },
    play(videoUrl){
      if (this.jssibucaPlay1==null){
        this.jssibucaPlay1 = this.createPlayer(this.$refs.playContainer1);
        if (this.jssibucaPlay1.hasLoaded()) {
          this.jssibucaPlay1.play(videoUrl);
        } else {
          this.jssibucaPlay1.on("load", () => {
            console.log("load 播放1")
            this.jssibucaPlay1.play(videoUrl);
          });
        }
      }else if (this.jssibucaPlay2==null){
        this.jssibucaPlay2 = this.createPlayer(this.$refs.playContainer2);
        if (this.jssibucaPlay2.hasLoaded()) {
          this.jssibucaPlay2.play(videoUrl);
        } else {
          this.jssibucaPlay2.on("load", () => {
            console.log("load 播放2")
            this.jssibucaPlay2.play(videoUrl);
          });
        }
      }else if (this.jssibucaPlay3==null) {
        this.jssibucaPlay3 = this.createPlayer(this.$refs.jssibucaPlay3);
        if (this.jssibucaPlay3.hasLoaded()) {
          this.jssibucaPlay3.play(videoUrl);
        } else {
          this.jssibucaPlay3.on("load", () => {
            console.log("load 播放3")
            this.jssibucaPlay3.play(videoUrl);
          });
        }
      }else if (this.jssibucaPlay4==null) {
        this.jssibucaPlay4 = this.createPlayer(this.$refs.jssibucaPlay4);
        if (this.jssibucaPlay4.hasLoaded()) {
          this.jssibucaPlay4.play(videoUrl);
        } else {
          this.jssibucaPlay4.on("load", () => {
            console.log("load 播放4")
            this.jssibucaPlay4.play(videoUrl);
          });
        }
      }else{
        this.$Message.error("请先关闭一个区域，再播放");
      }

      console.log(this.jssibucaPlay1);



      /** 为了更新 jessibuca 重新计算宽度 */
      /*this.videoUrl = videoUrl;*/

/*      console.log(this.$refs.playContainer1);
      if (!!this.$refs.videoPlayer1) { this.$refs.videoPlayer1.pause();}
      this.$refs.videoPlayer1.setHeight(this.$refs.playContainer1.clientWidth);
      this.$refs.videoPlayer1.play(videoUrl);*/
    },
    videoError: function (e) {
      console.log("播放器错误：" + JSON.stringify(e));
    },

    createPlayer(container){
      console.log(process.env.BASE_URL);
      let options =  {};
      let jplayer = new window.Jessibuca(Object.assign(
        {
          container: container,
          videoBuffer: 0.0, // 最大缓冲时长，单位秒
          isResize: false,
          isFlv: true,
          decoder: process.env.BASE_URL + "jessibuca/index.js",
          // text: "WVP-PRO",
          // background: "bg.jpg",
          loadingText: "加载中",
          hasAudio: false,//typeof (this.hasAudio) =="undefined"? true: this.hasAudio,
          debug: false,
          supportDblclickFullscreen: false, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件。
          operateBtns: {
            fullscreen: false,
            screenshot: false,
            play: false,
            audio: false,
          },
          record: "record",
          vod: this.vod,
          forceNoOffscreen: this.forceNoOffscreen,
          isNotMute: this.isNotMute,
        },
        options
      ));
      jplayer.on("load", function () {
        console.log("on load init");
      });

      jplayer.on("log", function (msg) {
        console.log("on log", msg);
      });
      jplayer.on("record", function (msg) {
        console.log("on record:", msg);
      });
      jplayer.on("pause", function () {
        //_this.playing = false;
      });
      jplayer.on("play", function () {
        //_this.playing = true;
      });
      jplayer.on("fullscreen", function (msg) {
        console.log("on fullscreen", msg);
        //_this.fullscreen = msg
      });

      jplayer.on("mute", function (msg) {
        console.log("on mute", msg);
        //_this.isNotMute = !msg;
      });
      jplayer.on("audioInfo", function (msg) {
        console.log("audioInfo", msg);
      });

      jplayer.on("videoInfo", function (msg) {
        //this.videoInfo = msg;
        console.log("videoInfo", msg);

      });

      jplayer.on("bps", function (bps) {
        console.log('bps', bps);

      });
      let _ts = 0;
      jplayer.on("timeUpdate", function (ts) {
        // console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
        _ts = ts;
      });
      jplayer.on("error", function (error) {
        console.log("error", error);
      });

      jplayer.on("timeout", function () {
        console.log("timeout");
      });

      jplayer.on('start', function () {
        console.log('start');
      })

      jplayer.on("performance", function (performance) {
        let show = "卡顿";
        if (performance === 2) {
          show = "非常流畅";
        } else if (performance === 1) {
          show = "流畅";
        }
        //_this.performance = show;
      });
      jplayer.on('buffer', function (buffer) {
        //console.log('buffer', buffer);
      })

      jplayer.on('stats', function (stats) {
        //console.log('stats', stats);
      })

      jplayer.on('kBps', function (kBps) {
        //_this.kBps = Math.round(kBps);
      });

      // 显示时间戳 PTS
      jplayer.on('videoFrame', function () {

      })

      //
      jplayer.on('metadata', function () {

      });

      return jplayer;
    },

    destroy1(){
      if (!!this.jssibucaPlay1) {
        this.jssibucaPlay1.destroy();
        this.jssibucaPlay1=null;
      }
    },
    destroy2(){
      if (!!this.jssibucaPlay2) {
        this.jssibucaPlay2.destroy();
        this.jssibucaPlay2=null;
      }
    },
    destroy3(){
      if (!!this.jssibucaPlay3) {
        this.jssibucaPlay3.destroy();
        this.jssibucaPlay3=null;
      }
    },
    destroy4(){
      if (!!this.jssibucaPlay4) {
        this.jssibucaPlay4.destroy();
        this.jssibucaPlay4=null;
      }
    }
  },
  mounted() { },
  beforeDestroy(){
    this.destroy1();
    this.destroy2();
    this.destroy3();
    this.destroy4();
  },

}
</script>
<style lang="less">
@import ".././template";
.layout{
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  width:100%;
  height:100%;
}
.box{
  position:absolute;
  width:100%;
  height:100%;
/*  top:100px;
  bottom:0;
  left:500px;
  right: 0;*/
  background-color:#f2f2f2;
}
.box-inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 铺满父元素容器，这时候宽高就始终相等了 */
}
.box-inner>li{
  width: calc(98% / 2);  /* calc里面的运算符两边要空格 */
  height: calc(98% / 2);
  margin-right: 2px;
  margin-bottom: 2px;
  overflow: hidden;
}
.flex{
  display: flex;
  flex-wrap: wrap;
}
.flex>li{
  flex-grow: 1; /* 子元素按1/n的比例进行拉伸 */
  background-color: #999999;
  text-align: center;
  color: #fff;
  font-size: 50px;
  line-height: 100%;
}
.flex>li:nth-of-type(2n){ /* 选择个数是2的倍数的元素 */
  margin-right: 0;
}
.flex>li:nth-of-type(n+3){  /* 从第7个起，选择倒数的三个元素，n可以取0 */
  margin-bottom: 0px;
  margin-top: -4px;
}

.buttons-box{
  width: 100%;
  height: 28px;
  background-color: rgba(43, 51, 63, 0.7);
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  left: 0;
  bottom: 0;
  user-select: none;
  z-index: 10;
}
.jessibuca-btn{
  width: 20px;
  color: rgb(255, 255, 255);
  line-height: 27px;
  margin: 0px 10px;
  padding: 0px 2px;
  cursor: pointer;
  text-align: center;
  font-size: 0.8rem !important;
}
.buttons-box-right {
  position: absolute;
  right: 0;
}
.demo-tree-render .ivu-tree-title{
  width: 100%;
}
.teststt{
  color: green;
}
</style>
